<template>
	<view class="menu-item" @click="toPage">
		<view class="iconfont" v-html="props.info.icon"></view>
		<view class="menu-name">{{ props.info.name }}</view>
	</view>
</template>

<script setup>
	const props = defineProps({
		info: {
			type: Object,
			default: {
				name: 'TITEL',
				icon: 'iconfont icon-xxx',
				page: 'pages/index'
			}
		}
	})

	const toPage = () => {
		const page = props.info.page
		if (!page) {
			uni.showToast({
				title: '暂未开放',
				icon: 'none'
			})
			return
		}
		uni.navigateTo({
			url: page
		})
	}
</script>

<style lang="scss" scoped>
	.menu-item {
		width: 100%;
		padding: 26px 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background-color: #F8F8F8;

		.iconfont {
			font-size: 32px;
			color: #000;
		}

		.menu-name {
			font-size: 10px;
			margin-top: 6px;
		}
	}
</style>